<template>
    <div class="box">
        <el-form :model="props" label-width="120px">
            <el-form-item label="编号">
                <span>{{ props.orderid }}</span>
            </el-form-item>

            <el-form-item label="姓名">
                <span>{{ props.orderproname }}</span>
            </el-form-item>
            <el-form-item label="状态">
                <el-radio-group v-model="order.status">
                    <el-radio :label="0">未支付 </el-radio>
                    <el-radio :label="1">待发货</el-radio>
                    <el-radio :label="2">待收获</el-radio>
                    <el-radio :label="3">待评价</el-radio>
                    <el-radio :label="4"> 已完成</el-radio>
                    <el-radio :label="5">明星</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="saveFn">修改</el-button>                 
                <el-button type="primary" @click="cancelFn">取消</el-button>
            </el-form-item>
        </el-form>
      
    </div>
</template>

<script setup lang="ts">
import { reactive,watch} from "vue";

import { admin_order_updateStatus } from "../../../utils/api";
// 子组件接受父组件传过来的数据
const props = defineProps<{
    orderid: string;
    orderproname:string;
    orderstatus:number  
}>()
interface Iorder {
    "status": number,
}
const order = reactive<Iorder>({
    "status": props.orderstatus,
})
// 发请求
const saveFn= ()=>{
    admin_order_updateStatus({
        orderid:props.orderid,
        status:order.status
    }).then((res: any) => {
        if (res.data.code === "200") {
        emit("hide");//关掉自己
        emit("updatesuccess");
        }
    })
}
// 子传父
// 声明事件
const emit = defineEmits<{
    (e: "hide"): void,
    (e:"updatesuccess"):void
}>();
const cancelFn = () => {
    // 触发隐藏事件
    emit("hide");
}
watch(props, () => {
    saveFn()
    order.status=props.orderstatus
}, {
    // 深度监听
    deep: true
})
</script>

<style scoped>
.box {
    width: 400px;
    height: 300px;
    border: 1px solid #e5e4e4;
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background-color: #ededed;
    z-index: 999;
}
</style>